/**
 * NK卡
 */
<template>
  <div v-loading="loading">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item class="font-w6 pointer">
        <a @click="handleCardChange">{{ fatherName }}</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>NK卡详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div  class="boxBlock"> 

<el-row>
 <el-col :span="24">
   <div class="dialogItem">
       <span>NK信息</span>
     </div> 
   <el-container> 
     <el-main>
       <el-row class="cardMsg">
         <el-col :span="4" >
           <div>卡金额</div> 
           <div class="margin-t10" style="color: red;">{{ info.cardType=='share'?'-':b(info.cardBalance) }}</div> 
         </el-col>


         <el-col :span="5" v-if="info.cardType=='share'">
           <div>累计消费</div>
           <div class="margin-t10" style="color: red;">{{ b(xiaofei) }}</div> 
         </el-col> 
         <!--  -->


         <el-col :span="6">
           <div>卡号</div>
           <div class="margin-t10" >{{ info.cardNo }}</div> 
         </el-col>
         <el-col :span="4" >
           <div>有效期</div>
           <div class="margin-t10" v-if="hasPermission3" > 
             <i class="el-icon-view "  style="color: #000; text-align: center;" v-if="cvvShow" @click="getShowCvv(info)"></i> 
            <el-row type="flex"  style="color: #000;" v-else>
              {{ info.expirationDate ? info.expirationDate : "卡失效" }}
            </el-row> 
           </div>
           <div class="margin-t10" v-else>-</div>
         </el-col>
         <el-col :span="4" >
           <div>CVV</div>
           <div class="margin-t10" v-if="hasPermission3">

              <i class="el-icon-view"  style="color: #000; text-align: center;" v-if="cvvShow" @click="getShowCvv(info)"></i> 
              <el-row type="flex"  style="color: #000;" v-else>
              {{ CVV ? CVV : "卡失效" }}
              </el-row> 
           </div>
           <div class="margin-t10" v-else>-</div>
         </el-col>
       </el-row>
     </el-main> 
   
   </el-container>
   <div style="display: flex;"> 
     <div class="box-card text-white" v-if="hasPermission3">
       <el-row type="flex" class="receivingCode font20">
         <span>{{ numberNo(info.cardNo, 4, 4) }}</span>
         <img
           class="pointer margin-l20"
           src="~@/assets/img/file-copy.png"
           @click="copyText(info.cardNo)"
         />
       </el-row>
       <div class="card_name">{{ info.firstName }} {{ info.lastName }}</div>
       <!-- <div class="card_time" v-if="hasPermission3"> 
          <el-row type="flex" class="fanCode font20" style="color: #000;">
            {{ info.expirationDate ? info.expirationDate : "卡失效" }}
        </el-row> 
       </div> -->
       <div class="card_type">
         {{ info.cardScheme }}
       </div>
     </div>

     <div class="box-card box-card2 text-white" v-if="hasPermission3">
        <i class="el-icon-view fanCode font20"  style="color: #000; text-align: center;" v-if="cvvShow" @click="getShowCvv(info)"></i> 
       <el-row type="flex" class="fanCode font20" style="color: #000;" v-else>
         {{ CVV ? CVV : "卡失效" }} 
       </el-row>
       
     </div>
 </div> 

 <div class=" margin-t30" style="margin-left: 30px;">
     <el-tag class="margin-r10" type="info" size="medium">
       {{ cardTypeData[info.cardType] }}
     </el-tag> 
     <el-button size="mini" type="text" @click="handleCardChange">返回</el-button>
     <!-- <el-button size="small" icon="el-icon-view" class=" ">
       隐藏卡信息
     </el-button> -->
     <!-- <el-button
       size="small"
       class=" "
       type="primary"
       v-if="info.cardStatus == 'normal'"
     >
       充值
     </el-button>
     <el-button
       size="small"
       icon="el-icon-delete"
       class="margin-l10"
       type="danger"
       @click="deleteConfirm()"
       v-if="info.cardStatus == 'normal'"
     >
       销卡
     </el-button> -->
   </div>
 </el-col>
</el-row>

<div class="dialogItem" style="margin: 20px 0;">
 <span>账单地址</span>
</div> 
<div style="padding: 0 20px;">
 <el-row class="font16 margin-t10" >
     <el-col :span="4"> 省份/洲 </el-col>
     <el-col :span="10" class="font-w6">
       {{ info.billingState }}
     </el-col></el-row
   >
   <el-row class="font16 margin-t10">
     <el-col :span="4"> 城市 </el-col>
     <el-col :span="10" class="font-w6">
       {{ info.billingCity }}
     </el-col></el-row
   >
   <el-row class="font16 margin-t10">
     <el-col :span="4"> 详细地址 </el-col>
     <el-col :span="10" class="font-w6">
       {{ info.billingAddress }}
     </el-col>
   </el-row>
   <el-row class="font16 margin-t10">
     <el-col :span="4"> 邮政编码 </el-col>
     <el-col :span="10" class="font-w6">
       {{ info.billingPostalCode }}
     </el-col></el-row
   >
</div>  

</div>
    

  <div class="boxBlock"> 
    
    <div class="font-w6 font20 margin-b20" v-if="hasPermission8">交易记录</div>
    <el-form :inline="true" :model="formInline">
      <el-form-item  >
        <el-select
          size="small"
          v-model="formInline.transactionType"
          placeholder="请选择交易类型"
          clearable
        >
          <el-option
            v-for="type in typeData"
            :label="type.key"
            :value="type.value"
            :key="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  >
        <el-select
          size="small"
          v-model="formInline.status"
          placeholder="请选择交易状态"
          clearable
        >
          <el-option
            v-for="type in statusData"
            :label="type.key"
            :value="type.value"
            :key="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          size="small"
          v-model="formInline.transactionCurrency"
          placeholder="请选择交易币种"
          clearable
        >
          <el-option label="请选择交易币种" value=""></el-option>
          <el-option
            v-for="item in currencyData"
            :label="item"
            :value="item"
            :key="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <div class="ra_box">
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%"
        v-if="listData"
      >
        <el-table-column
          prop="merchantNameLocation"
          label="商户名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="transactionAmount"
          label="交易金额"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ b(scope.row.transactionAmount) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="transactionCurrency"
          label="交易币种"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="transactionFeeAmount"
         v-if="userInfo.userId=='1242'"
          label="交易手续费"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div> 

              {{  JSON.parse(scope.row.feeDetailJson).transactionFeeAmount }}

            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="crossBroadFeeAmount"
          label="跨境手续费"
          v-if="userInfo.userId=='1242'"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>  
              {{  JSON.parse(scope.row.feeDetailJson).crossBroadFeeAmount }}

            </div>
          </template>
        </el-table-column> 

        <!-- <el-table-column
        prop="feeDeductionAmount"
        label="手续费"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div>
            {{ b(scope.row.feeDeductionAmount) }}
          </div>
        </template>
      </el-table-column> -->
        <!-- <el-table-column
        prop="transactionAmountRate"
        label="交易费率"
        show-overflow-tooltip
      >
      </el-table-column> -->
        <el-table-column
          prop="arrivalAmount"
          label="到账金额"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ b(scope.row.arrivalAmount) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="transactionType"
          label="交易类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ typeJson[scope.row.transactionType] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="交易状态"
          show-overflow-tooltip
          width="90"
        >
          <template slot-scope="scope">
            {{ statusJson[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createdAt"
          label="交易时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ timestampToTime(scope.row.createdAt, 8 * 60 * 60) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>

 
  </div>
  <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" ></codeChoose>
    
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  formatTime,
  numberNo,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
  reqJson
} from "../../api/axiosFun";
import { currencyData } from "../../utils/cardData";
import Pagination from "../../components/Pagination"; 
export default {
  name: "cardItem",
  props: ["cardInfo", "isCard", "fatherName"],
  data() {
    return {
      myCard: this.isCard,
      loading: true, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      b: format,
      formatTime: formatTime,
      numberNo: numberNo,
      timestampToTime: timestampToTime,
      currencyData: currencyData,
      CVV: "",
      info: "",
      cardTypeData: { recharge: "常规卡", share: "共享卡" },
      cardStatusData: {
        normal: "可用",
        pending_recharge: "待转入",
        unactivated: "未激活",
        freezing: "冻结中",
        frozen: "冻结",
        risk_frozen: "风控冻结",
        system_frozen: "系统冻结",
        unfreezing: "解冻中",
        expired: "过期",
        canceling: "销卡中",
        cancelled: "销卡",
      },
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardNo: "",
        cardStatus: "",
        transactionCurrency: "",
        transactionType: "",
      },
      statusData: [
        { key: "待审核", value: 0 },
        { key: "通过", value: 1 },
        { key: "驳回", value: 2 },
      ],
      typeData: [
        { key: "请选择交易类型", value: "" },
        { key: "消费", value: "auth" },
        { key: "纠正授权", value: "corrective_auth" },
        { key: "验证", value: "verification" },
        { key: "撤销", value: "void" },
        { key: "退款", value: "refund" },
        { key: "校正退款", value: "corrective_refund" },
        { key: "转入", value: "recharge" },
        { key: "卡金额退还", value: "recharge_return" },
        { key: "销卡退回", value: "discard_recharge_return" },
        { key: "服务费", value: "service_fee" },
        { key: "退款撤销", value: "refund_reversal" },
        { key: "汇入", value: "fund_in" },
      ],
      typeJson: {
        auth: "消费",
        corrective_auth: "纠正授权",
        verification: "验证",
        void: "撤销",
        refund: "退款",
        corrective_refund: "校正退款",
        recharge: "转入",
        recharge_return: "卡金额退还",
        discard_recharge_return: "销卡退回",
        service_fee: "服务费",
        refund_reversal: "退款撤销",
        fund_in: "汇入",
      },

      statusData: [
        { key: "请选择交易状态", value: "" },
        { key: "待处理", value: "pending" },
        { key: "已授权", value: "authorized" },
        { key: "成功", value: "succeed" },
        { key: "失败", value: "failed" },
        { key: "撤销", value: "void" },
        { key: "处理中", value: "processing" },
       
      
      ],

      statusJson: {
        pending: "待处理",
        authorized: "已授权",
        failed: "失败",
        void: "撤销",
        processing: "处理中",
        succeed: "成功",
      },
      listData: [],
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission2:false,
      hasPermission3:false,
      hasPermission8:false,

      verArry:[],
      verType:'',
      curItem:'', 
      userInfo: null,
      cvvShow:true, 
      headers:'', 

      xiaofei:''

    };
  },
  // 注册组件
  components: {
    Pagination,
    codeChoose
  },

  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
      this.userInfo = JSON.parse(this.$store.state.user);
      this.hasPermission2 = this.$hasPermission(this.userInfo,['common','user2']) 
      this.hasPermission3 = this.$hasPermission(this.userInfo,['common','user3']) 
      this.hasPermission8 = this.$hasPermission(this.userInfo,['common','user8'])  
      this.userInfo = JSON.parse(this.$store.state.user); 
      if(this.userInfo&&this.userInfo.verifyApi){
        this.verArry =  this.userInfo.verifyApi.split(',');
      }  
    },
  }, 


  created() {
    this.formInline.cardNo = this.cardInfo.cardNo;
    this.getItem(this.cardInfo.cardId);
    this.getdata(this.formInline);
   
    this.cvvShow = true;
    if(this.$store.state.user){
      this.userInfo = JSON.parse(this.$store.state.user);
      this.hasPermission2 = this.$hasPermission(this.userInfo,['common','user2']) 
      this.hasPermission3 = this.$hasPermission(this.userInfo,['common','user3']) 
      this.hasPermission8 = this.$hasPermission(this.userInfo,['common','user8'])  
      if(this.userInfo&&this.userInfo.verifyApi){
        this.verArry =  this.userInfo.verifyApi.split(',');
      }  
      this.getXiao();
    } 

  },
  methods: {

    getXiao(){  
      let apiUrl = '/api/admin/cardTotalAuth?cardId=' 
      if(this.userInfo&&(this.userInfo.userType == '01' || this.userInfo.userType=='02')){
        apiUrl = '/api/photon/cardTotalAuth?cardId=' 
      }    

      reqJson('get',apiUrl +  this.cardInfo.cardId, { 
      },{
        headers:{
          ...this.headers
        }
      })     
      // service
      //   .get("/api/admin/getCvv?cardId=" + row.cardId, {})
        .then((res) => {
          if (res.code == 0) { 
            // 共享卡累计消费=交易成功金额 - 退款成功金额 - 撤销成功金额 + 小额交易手续费
            // 退款，手续费，交易，撤销
            let total = res.data; 
            this.xiaofei = total.transaction.amount - total.void.amount - total.refund.amount + total.tradeFee.amount;

            // "void": {
            //       "amount": 0.00,
            //       "count": 0
            //   },
            //   "tradeFee": {
            //       "amount": 0.00,
            //       "count": 0
            //   },
            //   "transaction": {
            //       "amount": 0.00,
            //       "count": 0
            //   },
            //   "refund": {
            //       "amount": 0.00,
            //       "count": 0
            //   }


            
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    
    getParam(val,type){ 
      this.headers = val 
      this.getCvv(this.curItem);
    },
    getShowCvv(row){ 
      if(this.verArry.includes('/api/photon/getCvv')){
        this.verType = 'cvv';
        this.curItem = row
        this.$refs.codeRef.openDialog(); 
       
      }else{
        this.getCvv(row)
      }
    },
    getCvv(row) {  
      reqJson('get',"/api/photon/getCvv?cardId=" +  this.cardInfo.cardId, { 
      },{
        headers:{
          ...this.headers
        }
      })     
      // service
      //   .get("/api/admin/getCvv?cardId=" + row.cardId, {})
        .then((res) => {
          if (res.code == 0) {
            this.loading = false;
            this.info.expirationDate = res.data.expirationDate;
            this.CVV = res.data.cvv;
            this.cvvShow = false;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    hasPermissionMethod(data) { 
      if(this.$store.state.user){
        let userInfo = JSON.parse(this.$store.state.user);
        return this.$hasPermission(userInfo,data) 
      } 
    },
    getItem(id) {
      service
        .get("/api/photon/cardInfo?cardId=" + id, {})
        .then((res) => {
          if (res.code == 0) {
            this.info = res.data;
            this.loading = false;
            // this.getCvv();
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    getdata(parameter) {
      let url = getUrl(parameter);
      service
        .get("/api/photon/transactionList" + url, {})
        .then((res) => {
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // getCvv() {
    //   service
    //     .get("/api/photon/getCvv?cardId=" + this.cardInfo.cardId, {})
    //     .then((res) => {
          
    //       if (res.code == 0) {
    //         this.info.expirationDate = res.data.expirationDate;
    //         this.CVV = res.data.cvv;
    //       } else {
    //         this.$message({
    //           type: "info",
    //           message: res.msg,
    //         });
    //       }
    //     })
    //     .catch((err) => {
    //       this.$message.error(err);
    //     });
    // },
    handleCardChange() {
      this.myCard = true;
      this.$emit("changCard", { myCard: this.myCard });
    },
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    search() {
      this.getdata(this.formInline);
    },
    handleEdit(index, row) {
      this.editFormVisible = true;
    },
    // 销卡
    deleteConfirm() {
      this.$confirm("销卡后余额将退回到钱包余额,请问您确定要销卡吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteEdit();
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消销卡",
          });
        });
    },
    deleteEdit() {
      service
        .post("/api/photon/cardClose?cardId=" + this.info.cardId, {})
        .then((res) => {
          if (res.code == 0) {
            this.$message.success(res.msg);
            // this.getdata(this.formInline);
            this.handleCardChange();
          } else {
            this.$message.error(res.msg);
            return;
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    updateCard(id) {
      service
        .post("/api/photon/cardRefresh?cardId=" + id, "")
        .then((res) => {
          if (res.code == 0) {
            this.handleCardChange();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {});
    },
    copyText(text) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch((err) => {
          // 复制失败
          console.error("复制失败");
        });
    },
  },
};
</script>

<style scoped>
.userRole {
  width: 100%;
}
.box-card {
  position: relative;
  height: 300px;
  width: 473px; 
  margin:20px 30px;
  background: url(../../assets/img/NK_card.png) no-repeat;
  background-size: 100% 100%;
}
.box-card2 {
  position: relative;
  height: 300px;
 
  background: url(../../assets/img/NK_card2.png) no-repeat;
  background-size: 100% 100%;
}
 

.receivingCode {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -25% -50%;
}
.receivingCode span {
  letter-spacing: 3px;
}
.receivingCode img {
  display: inline-block;
  width: 30px;
}
.box-card .card_name {
  position: absolute;
  bottom: 40px;
  left: 18px;
  font-size: 18px;
}
.box-card .card_time {
  position: absolute;
  bottom: 40px;
  left: 200px;
  font-size: 20px;
}
.box-card .card_type {
  position: absolute;
  bottom: 40px;
  right: 40px;
  font-size: 20px;
}

.box-card .custom-card-body {
  font-size: 16px;
}
.custom-card-body div {
  margin-top: 20px;
}

.cardMsg {
  background-color: #f9faff;
  padding: 20px;
  border-radius: 5px;
  font-size: 18px;
}

.box-card2 {
  position: relative;
  height: 300px;
  background: url(../../assets/img/NK_card2.png) no-repeat;
  background-size: 100% 100%;
}
.fanCode{
  position: absolute;
  width: 100px;
  top: 40%;
  right: 5%;
  text-align: right;
 
}
</style>

 
 